<template>
  <div class="school-add">
    <div class="title">
      <div class="block"></div>
      <div class="word">添加学校信息</div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div class="school-add-content">
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <div class="topbox">
            <div class="tipsbox">
              <img class="tips" src="@/assets/index/school/box.svg" alt="" />
              <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
              <span>基本信息</span>
            </div>

            <el-form-item label="学校中文名称:">
              <el-radio v-model="flag" label="0">国内</el-radio>
              <el-radio v-model="flag" label="1">国外</el-radio>
            </el-form-item>
            <el-form-item label="学校中文名称:" prop="schoolCName">
              <el-input v-model="ruleForm.schoolCName"></el-input>
            </el-form-item>

            <el-form-item label="学校英文名称:" prop="schoolEName">
              <el-input v-model="ruleForm.schoolEName"></el-input>
            </el-form-item>

            <el-form-item label="申请时间:" prop="applyTime">
              <el-input v-model="ruleForm.applyTime"></el-input>
            </el-form-item>

            <el-form-item label="国际生比例:" prop="proportion">
              <el-input v-model="ruleForm.proportion"></el-input>
            </el-form-item>

            <el-form-item label="学费:" prop="tuition">
              <el-input v-model="ruleForm.tuition"></el-input>
            </el-form-item>

            <el-form-item label="学校官网:" prop="schoolUrl">
              <el-input v-model="ruleForm.schoolUrl"></el-input>
            </el-form-item>

            <el-form-item label="学校照片:">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :http-request="selectPicUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>

          <div class="midbox">
            <div class="tipsbox">
              <img class="tips" src="@/assets/index/school/box.svg" alt="" />
              <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
              <span>申请要求</span>
            </div>
            <el-form-item
              label-width="150px"
              :label="'申请'"
              :rules="{
                required: true,
                message: '申请类型不能为空',
                trigger: 'blur',
              }"
            >
              <br />
              <div
                class="addOrDeleteSubject"
                v-for="(apply, index) in dynamicValidateForm.apply"
                :key="index"
              >
                <div>
                  <span>申请类型:</span>
                  <el-input class="input" v-model="apply.CName"></el-input>

                  <span>雅思成绩:</span>
                  <el-input class="input" v-model="apply.lelts"></el-input>

                  <span>A-Level成绩:</span>
                  <el-input class="input" v-model="apply.ALevel"></el-input>
                  <el-button
                    class="delete"
                    @click.prevent="removeSubject(apply)"
                    >删除</el-button
                  >
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button @click="addSubject">添加</el-button>
            </el-form-item>
          </div>

          <div class="bottombox">
            <div class="tipsbox">
              <img class="tips" src="@/assets/index/school/box.svg" alt="" />
              <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
              <span>学校简介</span>
            </div>
            <quill-editor
              class="quill-editor"
              ref="quillEditor"
              v-model="content"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
            ></quill-editor>
          </div>
        </el-form>
        <div class="buttonbox">
          <el-button class="cancel" @click="cancel">取消</el-button>
          <el-button class="save" @click="save">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addQuillTitle } from "@/utils/quill-title.js";

import {
  addSchoolInfo,
  addSchoolApplyInfo,
  addSchoolPhoto,
} from "../../../api";

import qs from "qs";

export default {
  inject: ["reload"],
  name: "schoolAdd",
  components: {},
  data() {
    return {
      content: "",
      introduction: "", //学校简介
      logo: "logo",
      formData: new FormData(),
      imageUrl: "", //学校logo链接
      flag: "0", // 0位国内1为国外
      ruleForm: {
        tuition: "",
        proportion: "",
        schoolCName: "",
        schoolEName: "",
        applyTime: "",
        proportion: "",
        schoolUrl: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      rules: {
        schoolCName: [
          { required: true, message: "请输入学校中文名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        schoolEName: [
          { required: true, message: "请输入学校英文名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        applyTime: [
          { required: true, message: "请输入申请时间", trigger: "blur" },
          {
            min: 2,
            max: 16,
            message: "长度在 2 到 16 个字符",
            trigger: "blur",
          },
        ],
        proportion: [
          { required: false, message: "请输入国际生比例", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        tuition: [
          { required: true, message: "请输入学校学费", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        logo: [{ required: true, message: "请上传logo", trigger: "blur" }],

        schoolUrl: [
          { required: false, message: "请输入学校官网", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "请输入学校官网",
            trigger: "blur",
          },
        ],
      },
      dynamicValidateForm: {
        apply: [
          {
            CName: "",
            lelts: "",
            ALevel: "",
          },
        ],
      },
    };
  },

  mounted() {
    this.$emit("routeName", "schoolAdd");
    addQuillTitle();
  },

  methods: {
    refresh() {
      this.reload();
    },
    handleAvatarSuccess(file, fileList) {
      console.log(file, fileList);
    },
    selectPicUpload(file) {
      this.formData.append("logoImg", file.file);
      addSchoolPhoto(this.formData).then((res) => {
        console.log(res);
        this.imageUrl = res.data.data;
      });
    },
    cancel() {},
    save() {
      let data = qs.stringify({
        aaa: "",
        applyTime: this.ruleForm.applyTime,
        proportion: this.ruleForm.proportion,
        schoolCName: this.ruleForm.schoolCName,
        schoolEName: this.ruleForm.schoolEName,
        schoolUrl: this.ruleForm.schoolUrl,
        tuition: this.ruleForm.tuition,
        introduction: this.introduction,
        schoolLogo: this.imageUrl,
        flag: this.flag,
        bbb: "",
      });

      let requirementDtos = [];
      for (let i = 0; i < this.dynamicValidateForm.apply.length; i++) {
        requirementDtos.push(this.dynamicValidateForm.apply[i]);
      }

      addSchoolInfo(data).then((res) => {
        console.log(res);
        if (res.code === 200) {
          addSchoolApplyInfo(
            res.data.schoolId,
            qs.stringify(
              {
                aaa: "",
                requirementDtos: requirementDtos,
                bbb: "",
              },
              { arrayFormat: "indices", allowDots: true }
            )
          ).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message({
                message: "添加学校信息成功",
                type: "success",
              });
            } else {
              this.$message.error("添加学校信息失败");
            }
          });
        }
      });
    },
    onEditorFocus(val, editor) {
      // 富文本获得焦点时的事件
      // console.log(val); // 富文本获得焦点时的内容
      // editor.enable(false); // 在获取焦点的时候禁用
    },
    onEditorBlur(val) {
      // 富文本失去焦点时的事件
      // console.log(val); // 富文本失去焦点时的内容
      // console.log(val.root.innerText);
      this.introduction = val.root.innerText;
    },
    onEditorChange(val) {
      // 富文本内容改变时的事件
      // console.log(val.quill.root.innerText); // 富文本改变时的内容
      this.introduction = val.quill.root.innerText;
    },
    removeSubject(item) {
      var index = this.dynamicValidateForm.apply.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.apply.splice(index, 1);
      }
    },
    addSubject() {
      this.dynamicValidateForm.apply.push({});
    },
  },
};
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
  margin-left: 80%;
}

.school-add-content {
  background-color: #fff;
  border: 1px solid #e4e4e4;
  width: 80%;
  margin-left: 10%;
}

.form {
  width: 80%;
  margin-left: 10%;
  background-color: #fff;
  padding-top: 50px;
  padding-bottom: 50px;

  margin-bottom: 150px;
}

.topbox,
.midbox,
.bottombox {
  position: relative;
}

.bottombox {
  height: 500px;
}

.tipsbox {
  position: relative;
}

.tipsbox .tips {
  position: absolute;
  left: -300px;
  top: 20px;
}

.tipsbox .logo {
  position: absolute;
  left: -280px;
  top: 38px;
}

.tipsbox span {
  position: absolute;
  font-weight: 700;
  color: #fff;
  left: -255px;
  top: 36px;
}

.el-form {
  width: 400px;
  margin-left: 50%;
  transform: translateX(-70%);
}

.minScore {
  font-size: 14px;
  color: #999;
  margin: -20px 0 30px 150px;
}

.quill-editor {
  width: 600px;
  height: 300px;
  margin-left: 10%;
}

.buttonbox {
  display: flex;
  margin-left: 50%;
  transform: translateX(-30%);
}
.cancel {
  width: 200px;
  border: 1px solid #44c8ae;
  color: #44c8ae;
  font-size: 16px;
}
.save {
  width: 200px;
  font-size: 16px;
  margin-left: 50px;
  border: 1px solid #1abc9c;
  background-color: #1abc9c;
  color: #fff;
}

.addOrDeleteSubject {
  display: flex;
  margin-bottom: 10px;
}

.input {
  margin-right: 20px;
  display: inline-block;
}

.delete {
  margin-top: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
